<template>
  <div id="order" class="order">
    <!-- 头部 -->
    <div class="header">
       <van-sticky>
        <van-nav-bar
        class="van_nav"
        title="订单"
      />
      </van-sticky>
    </div>
    <div class="tab">
      <van-tabs  v-model="active" sticky animated>
        <van-tab title="全部订单">
          <van-card
            v-for="order in AllOrderData"
            :key="order.id"
            @click="toDetails(order)">
            <template #thumb>
              <van-image
                round
                width="5rem"
                height="5rem"
                :src="userInfo.userFace"
              />
            </template>
            <template #title>
                <div style="font-size:15px;position: relative; top: 12px">{{userInfo.username}}</div>
                <van-tag style="position: relative; left: 83%; top: -5px" v-if="order.status=='待派单'" color="#45b97c" plain>{{order.status}}</van-tag>
                  <van-tag style="position: relative; left: 83%; top: -5px" v-else-if="order.status=='待服务'" color="#dea32c" plain>{{order.status}}</van-tag>
                  <van-tag style="position: relative; left: 83%; top: -5px" v-else-if="order.status=='待接单'" color="linear-gradient(to right, #ff6034, #ee0a24)" plain>{{order.status}}</van-tag>
                  <van-tag style="position: relative; left: 83%; top: -5px" v-else-if="order.status=='已完成'" color="#7232dd" plain>{{order.status}}</van-tag>
                  <van-tag style="position: relative; left: 83%; top: -5px" v-else-if="order.status=='待确认'" color="#2196f3" plain>{{order.status}}</van-tag>
                <div>{{order.address.province}}{{order.address.city}}{{order.address.area}}</div>
            </template>
              <template #price-top>
                <div>{{order.orderTime | dateFormat}}</div>
            </template>
            <template #price>
              <span>{{'¥'+order.total+'.00'}}</span>
            </template>
            <template #footer>
              <van-button v-if="order.status=='待确认'" color="#009ad6" round size="mini" @click.stop="confirmOrder(order.id)">确认完成</van-button>
              <van-button v-else-if="order.status=='已完成'" color="linear-gradient(to right, #808080, #3fada8)" round size="mini" @click.stop="showOrdercontent(order.comments)">查看评价</van-button>
            </template>
            </van-card>
            <div style="height:80px"></div>
          </van-tab>
        <van-tab title="待派单">
          <van-empty
                v-if="orderData1[0] == null"
                class="custom-image"
                image="https://img1.baidu.com/it/u=3518834411,2584165971&fm=26&fmt=auto&gp=0.jpg"
                description="暂无订单"
              />
          <van-card
            v-for="order in orderData1"
            :key="order.id"
            :thumb="userInfo.userFace"
            @click="toDetails(order)">
            <template #price>
              <div>{{'¥'+order.total+'.00'}}</div>
            </template>
            <template #thumb>
              <van-image
                round
                width="5rem"
                height="5rem"
                :src="userInfo.userFace"
              />
            </template>
            <template #title>
                <div style="font-size:15px;position: relative; top: 12px">{{userInfo.username}}</div>
                <van-tag style="position: relative; left: 83%; top: -5px" color="#45b97c" plain>{{order.status}}</van-tag>
                <div>{{order.address.province}}{{order.address.city}}{{order.address.area}}</div>
            </template>
              <template #price-top>
                <div>{{order.orderTime | dateFormat}}</div>
            </template>
            <template #price->
                <div>{{order.orderTime}}</div>
            </template>
            </van-card>
            <div style="height:80px"></div>
            </van-tab>
        <van-tab title="待确认">
              <van-empty
                v-if="orderData2[0] == null"
                class="custom-image"
                image="https://img1.baidu.com/it/u=3518834411,2584165971&fm=26&fmt=auto&gp=0.jpg"
                description="暂无订单"
              />
               <van-card
            v-for="order in orderData2"
            :key="order.id"
            @click="toDetails(order)">
            <template #price>
              <div>{{'¥'+order.total+'.00'}}</div>
            </template>
            <template #thumb>
              <van-image
                round
                width="5rem"
                height="5rem"
                :src="userInfo.userFace"
              />
            </template>
            <template #title>
                <div style="font-size:15px;position: relative; top: 12px">{{userInfo.username}}</div>
                <van-tag style="position: relative; left: 83%; top: -5px" color="#2196f3" plain>{{order.status}}</van-tag>
                <div>{{order.address.province}}{{order.address.city}}{{order.address.area}}</div>
            </template>
              <template #price-top>
                <div>{{order.orderTime | dateFormat}}</div>
            </template>
            <template #price->
                <div>{{order.orderTime}}</div>
            </template>
            <template #footer>
              <van-button color="#009ad6" round size="mini" @click.stop="confirmOrder(order.id)">确认完成</van-button>
            </template>
            </van-card>
            <div style="height:80px"></div>
        </van-tab>
        <van-tab title="已完成">
            <van-empty
                v-if="orderData3[0] == null"
                class="custom-image"
                image="https://img1.baidu.com/it/u=3518834411,2584165971&fm=26&fmt=auto&gp=0.jpg"
                description="暂无订单"
              />
             <van-card
            v-for="order in orderData3"
            :key="order.id"
            :price="order.total + '00'"
            @click="toDetails(order)">
            <template #price>
              <div>{{'¥'+order.total+'.00'}}</div>
            </template>
            <template #thumb>
              <van-image
                round
                width="5rem"
                height="5rem"
                :src="userInfo.userFace"
              />
            </template>
            <template #title>
                <div style="font-size:15px;position: relative; top: 12px">{{userInfo.username}}</div>
                <van-tag style="position: relative; left: 83%; top: -5px" color="#7232dd" plain>{{order.status}}</van-tag>
                <div>{{order.address.province}}{{order.address.city}}{{order.address.area}}</div>
            </template>
              <template #price-top>
                <div>{{order.orderTime | dateFormat}}</div>
            </template>
            <template #price->
                <div>{{order.orderTime}}</div>
            </template>
            <template  #footer>
              <van-button v-if="order.comments[0] == null" color="linear-gradient(to right, #ff6034, #ee0a24)" round size="mini" @click.stop="Evaluation(order.id,order.customer.id)"> 评 价 ❤</van-button>
              <van-button v-else color="linear-gradient(to right, #007991, #78ffd6)" round size="mini" @click.stop="Evaluation(order.id,order.customer.id)"> 追 评 ❥</van-button>
            </template>
            </van-card>
            <div style="height:80px"></div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 评价模态框 -->
    <van-dialog v-model="show" title="评价本次服务"  :show-confirm-button='confirmbutton'>
      <van-nav-bar
          left-text="取消"
          @click-left="cancel"
        />
      <van-form>
      <van-field name="rate"  label="评分">
        <template #input>
          <van-rate v-model="rate" />
        </template>
      </van-field>
      <van-field
          v-model="content"
          rows="3"
          autosize
          label="评价"
          type="textarea"
          maxlength="50"
          placeholder="请输入评价"
          show-word-limit
        />
        <div style="margin: 16px;">
          <van-button round block color="linear-gradient(to right, #007991, #78ffd6)" @click="changeEvaluation">提交</van-button>
        </div>
      </van-form>
    </van-dialog>
    <div class="content"></div>
  </div>
</template>
<script>
import {mapState ,mapActions} from 'vuex'
import {get,post} from '@/http/axios'
  export default {
    data() {
      return {
        confirmbutton: false,
        customerId: '',
        orderId: '',
        showcancle: true,
        number:1,
        rate:0,
        //评价内容
        content:'',
        //控制模态框
        show:false,
        userId:'',
        //已完成
        orderData3: [],
        //待确认
        orderData2: [],
        //待派单数组
        orderData1: [],
        AllOrderData:[],
        active: 0,
        id: 12,
        list: {
          page: 1,
          pageSize: 100,
          customerId: ''
        },
      }
    },
    computed:{
        ...mapState('user',['userInfo'])
    },
    methods: {
      cancel() {
        this.show = false
        this.content = ''
        this.rate = 0
      },
      //确认评价
      async changeEvaluation(){
          let data = {
            content: this.content,
            orderId: this.orderId,
            customerId: this.customerId
          }
          // console.log(data);
          let res =await post('/orderComment/submit',data)
              //  console.log(this.content);
              this.$notify({ type: 'success', message: '评价成功!', background:'#1fddff'});
               this.show = false
              this.rate = 0
              this.content = ''
              let list = {
                page: 1,
                  pageSize: 100,
                  customerId: this.userId,
                  status: '已完成'
              }
            this.getOrderData3(list)
      },
      //评价订单
      Evaluation(orderId,customerId) {
        this.orderId = orderId
        this.customerId = customerId
        this.showcancle = true
        this.show = true
      },
      //确认订单
      async confirmOrder(orderId) {
        let res = await get('/order/confirmOrder',{orderId})
        this.$notify({ type: 'success', message: '确认成功', background: '#00B4DB' });
        let list = {
          page: 1,
          pageSize: 100,
          customerId: this.userId,
          status: '待确认'
      }
      this.getOrderData2(list)
      list.status = '已完成'
      this.getOrderData3(list)
        // console.log(orderId);
      },
      ...mapActions('user',['getUserInfo']),
      //获取已完成数据
      async getOrderData3(list) {
        let res =await get('/order/pageQuery',list)
        this.orderData3 = res.data.data.list
      },
      //获取待确认数据
      async getOrderData2(list) {
        let res =await get('/order/pageQuery',list)
        this.orderData2 = res.data.data.list
        // console.log(res.data.data.list);
      },
      //获取待派单数据
      async getOrderData1(list) {
        let res =await get('/order/pageQuery',list)
        
        this.orderData1 = res.data.data.list
      },
      async getAllOrderData(list) {
        let res =await get('/order/pageQuery',list)
        // console.log(res.data.data.list);
        this.AllOrderData = res.data.data.list
      },
      //跳转订单详情页面
      toDetails(orderData) {
        this.$router.push({
        path: '/manager/Details',
        query: {
          orderData: orderData
        }
      })
      }
    },
    created() {
      this.getUserInfo().then((r) => {
        this.userId = this.userInfo.id
         this.list.customerId = this.userInfo.id
         this.getAllOrderData(this.list)
         this.list.status = '待派单'
         this.getOrderData1(this.list)
         this.list.status = '待确认'
         this.getOrderData2(this.list)
         this.list.status = '已完成'
         this.getOrderData3(this.list)
        //  console.log(this.list);
      })
    },
  }
</script>

<style scoped>
.van_nav {
  background-image: linear-gradient(to right,  #74ebd5,#ACB6E5);
}
.van-card {
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px;
  margin: 15px;
}
#order /deep/ .van-nav-bar__title{
  color: white !important;
  font-size: 1rem;
}
</style>